<template>
  <div class="app-main-container tabpdding">
    <!-- <div class="app-main-title">积分规则配置</div> -->
    <el-tabs v-model="tabActiveName" @tab-click="tabsChange">
      <el-tab-pane :label="translate('integralGet')" name="one">
        <el-table
          ref="table1"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('orderType')"
            prop="orderTypeName"
          />
          <el-table-column
            align="center"
            :label="translate('integralGetScale')"
            prop="gainRatio"
          />
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-preventReClick
                  type="primary"
                  @click="editShow(scope.row, 1)"
                  >{{ translate("config") }}</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          ref="table2"
          v-loading="listLoading"
          :data="listb"
          style="margin-top: 20px"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('punchCardInteg')"
            prop="signInIntegral"
          />
          <el-table-column
            align="center"
            :label="translate('continuousDays')"
            prop="signInDay"
          />
          <el-table-column
            align="center"
            :label="translate('punchCardIntegCon')"
            prop="signInAward"
          />
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-preventReClick
                  type="primary"
                  @click="editShow(scope.row, 2)"
                  >{{ translate("config") }}</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="translate('integralDeduction')" name="two">
        <el-table
          v-loading="listLoading"
          :data="listc"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('orderType')"
            prop="orderTypeName"
          />
          <el-table-column
            align="center"
            :label="translate('minCousumMoney')"
            prop="priceMin"
          />
          <el-table-column
            align="center"
            :label="translate('integraldedMax')"
            prop="deductionMax"
          />
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-preventReClick
                  type="primary"
                  @click="editShow(scope.row, 3)"
                  >{{ translate("config") }}</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form
          ref="dkForm"
          :rules="rules"
          label-width="auto"
          :inline="false"
          size="normal"
          label-suffix="："
          :model="dikou"
          style="margin-top: 20px"
        >
          <el-form-item
            :label="translate('integralDikouScale')"
            prop="deductionRatio"
          >
            <el-col :span="6"
              ><el-input
                v-model="dikou.deductionRatio"
                onkeyup="value=value.replace(/[^\d^\.]/g,'')"
                oninput="if(value<0) { value = ''}"
                type="number"
                :placeholder="translate('integralPlace')"
                ><span slot="suffix">{{
                  translate("integral")
                }}</span></el-input
              ></el-col
            >
            <el-col class="line" :span="1" style="text-align: center">{{
              translate("dikou")
            }}</el-col>
            <el-col :span="6"
              ><el-input :value="1 + translate('rmb')" type="text" disabled
            /></el-col>
          </el-form-item>
          <el-form-item :label="translate('integralDikouS')">
            <el-switch
              v-model="dk.isOpen"
              v-preventReClick
              :active-value="'1'"
              :inactive-value="'0'"
              @change="toConfigUpdate($event)"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              class="save-button"
              @click="dikouBtn"
              >{{ translate("save") }}</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="translate('integralDestroy')" name="three">
        <div class="mb20">{{ translate("integralDestroyScheme") }}：</div>
        <el-radio v-model="xiaohu.type" label="1" @change="changeDesType">{{
          translate("cqyx")
        }}</el-radio>
        <el-radio v-model="xiaohu.type" label="2" @change="changeDesType">{{
          translate("agdsjxh")
        }}</el-radio>
        <el-radio v-model="xiaohu.type" label="3" @change="changeDesType">{{
          translate("ahycjsjxh")
        }}</el-radio>
        <el-radio v-model="xiaohu.type" label="4" @change="changeDesType">{{
          translate("ajfcssjxh")
        }}</el-radio>
        <div v-if="xiaohu.type == '1'" class="placeholder9 mt20">
          {{ translate("integDesDesc1") }}
        </div>
        <div v-if="xiaohu.type == '2'" class="placeholder9 mt20">
          {{ translate("integDesDesc3") }}
        </div>
        <div v-if="xiaohu.type == '3'" class="placeholder9 mt20">
          {{ translate("integDesDesc3") }}
        </div>
        <div v-if="xiaohu.type == '4'" class="placeholder9 mt20">
          {{ translate("integDesDesc4") }}
        </div>
        <el-form
          ref="xhForm"
          :rules="rules"
          label-width="auto"
          :inline="false"
          :model="xiaohu"
          label-suffix="："
          size="normal"
          style="margin-top: 20px"
        >
          <el-form-item
            v-if="xiaohu.type == '3' || xiaohu.type == '4'"
            :label="translate('xhzq')"
            prop="destroyCycle"
          >
            <el-input
              v-model="xiaohu.destroyCycle"
              type="number"
              style="width: 300px"
              onkeyup="value=value.replace(/[^\d^\.]/g,'')"
              oninput="if(value<0) { value = ''}"
              :min="1"
              :max="365"
              :placeholder="translate('xhzqPlace')"
            />
            <div class="tip">
              {{
                xiaohu.type == "2"
                  ? translate("integDesDesc5")
                  : translate("integDesDesc6")
              }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="xiaohu.type == '2'"
            :label="translate('jfxhsj')"
            prop="regularDate"
          >
            <el-date-picker
              v-model="xiaohu.regularDate"
              style="width: 300px"
              type="datetime"
              format="MM-dd"
              value-format="MM-dd"
              :placeholder="translate('qxzjfxhsj')"
            />
            <div class="tip">
              {{ translate("integDesDesc7") }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="xiaohu.type != '1'"
            :label="translate('xhtxsj')"
            prop="remindDay"
          >
            <el-input
              v-model="xiaohu.remindDay"
              type="number"
              style="width: 300px"
              onkeyup="value=value.replace(/[^\d^\.]/g,'')"
              oninput="if(value<0) { value = ''}"
              :min="1"
              :max="365"
              :placeholder="translate('xhtxsjP')"
            />
            <div class="tip">{{ translate("integDesDesc8") }}</div>
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              class="save-button"
              @click="xhBtn"
              >{{ translate("save") }}</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="translate('config')"
      :visible.sync="showDialog"
      width="500px"
    >
      <el-form
        ref="ruleForm"
        label-suffix="："
        :rules="rules"
        :model="param"
        label-width="auto"
      >
        <el-form-item
          v-if="type == 1 || type == 3"
          :label="translate('orderType')"
          prop="orderTypeName"
        >
          <el-input v-model="param.orderTypeName" disabled />
        </el-form-item>
        <el-form-item
          v-if="type == 1"
          :label="translate('integralGetScale')"
          prop="gainRatio"
        >
          <el-input
            v-model="param.gainRatio"
            type="number"
            onkeyup="if(value){value=value.replace(/[^\d^\.]/g,'')} if(value<0){value=''}"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
            ><span slot="suffix">%</span></el-input
          >
          <div class="tip">{{ translate("integralGetScaleP") }}</div>
        </el-form-item>
        <el-form-item
          v-if="type == 2"
          :label="translate('punchCardInteg')"
          prop="signInIntegral"
        >
          <el-input
            v-model="param.signInIntegral"
            type="number"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
          />
          <div class="tip">{{ translate("yhmcdkhq") }}</div>
        </el-form-item>
        <el-form-item
          v-if="type == 2"
          :label="translate('continuousDays')"
          prop="signInDay"
        >
          <el-input
            v-model="param.signInDay"
            type="number"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
          />
          <div class="tip">{{ translate("lxdkts") }}</div>
        </el-form-item>
        <el-form-item
          v-if="type == 2"
          :label="translate('punchCardIntegCon')"
          prop="signInAward"
        >
          <el-input
            v-model="param.signInAward"
            type="number"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
          />
          <div class="tip">{{ translate("lxdktshhh") }}</div>
        </el-form-item>
        <el-form-item
          v-if="type == 3"
          :label="translate('minCousumMoney')"
          prop="priceMin"
        >
          <el-input
            v-model="param.priceMin"
            type="number"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
          />
          <div class="tip">{{ translate("ddzdxfjejf") }}</div>
        </el-form-item>
        <el-form-item
          v-if="type == 3"
          :label="translate('integraldedMax')"
          prop="deductionMax"
        >
          <el-input
            v-model="param.deductionMax"
            type="number"
            onkeyup="if(value){value=value.replace(/[^\d^\.]/g,'')} if(value<0){value=''}"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('qsr')"
            ><span slot="suffix">%</span></el-input
          >
          <div class="tip">{{ translate("yhzfjejfdk") }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="formOnSubmit('ruleForm')"
          >{{ translate("enter") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  integralconfig,
  integralconfigUpdate,
  integralDestroyDetail,
  integralDestroySave
} from '@/api'
export default {
  name: 'IntegralRule',
  data() {
    return {
      modalDialog: this.$store.state.app.dialog,
      subLoading: false,
      meta: [],
      listLoading: true,
      tabActiveName: 'one',
      list: [],
      listb: [],
      listc: [],
      dikou: {},
      xiaohu: {
        type: '1'
      },
      dk: {},
      param: {},
      showDialog: false,
      type: '',
      rules: {
        deductionRatio: [
          { required: true, message: this.translate('integralPlace'), trigger: 'blur' }
        ],
        regularDate: [
          { required: true, message: this.translate('qxzjfxhsj'), trigger: 'change' }
        ],
        remindDay: [
          { required: true, message: this.translate('xhtxsjP'), trigger: 'blur' }
        ],
        destroyCycle: [
          { required: true, message: this.translate('xhzqPlace'), trigger: 'blur' }
        ],
        // orderTypeName: [
        //   { required: true, message: translate('orderTypePlace'), trigger: 'blur' }
        // ],
        gainRatio: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        signInIntegral: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        signInDay: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        signInAward: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        priceMin: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        deductionMax: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table1.doLayout()
      this.$refs.table2.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table1.doLayout()
      this.$refs.table2.doLayout()
    })
  },
  methods: {
    tabsChange() {
      if (this.tabActiveName === 'three') {
        this.getDestoryConfig()
      }
    },
    getDestoryConfig() {
      integralDestroyDetail({ param: {} }).then(res => {
        this.xiaohu = res.record
      })
    },
    editShow(e, type) {
      this.showDialog = true
      this.type = type
      this.param = { ...e }
    },
    changeDesType(val) {
      this.$set(this, 'xiaohu', { type: val })
    },
    xhBtn() {
      const param = this.xiaohu
      const that = this
      this.$refs['xhForm'].validate((valid) => {
        if (valid) {
          integralDestroySave({ param }).then(res => {
            if (res.errorCode === '000000') {
              that.$message.success(this.translate('saveScs'))
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    toConfigUpdate(flag) {
      const param = this.dk
      param.isOpen = flag
      integralconfigUpdate({ param }).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.translate('configScs'))
        }
      })
    },
    dikouBtn() {
      const param = this.dikou
      const that = this
      this.$refs['dkForm'].validate((valid) => {
        if (valid) {
          integralconfigUpdate({ param }).then(res => {
            if (res.errorCode === '000000') {
              that.$message.success(this.translate('configScs'))
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    formOnSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.confirmBtn()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    confirmBtn() {
      const param = this.param
      if (this.type === 3) {
        param.priceMin = Number(param.priceMin)
      }
      this.subLoading = true
      integralconfigUpdate({ param }).then(res => {
        this.subLoading = false
        if (res.errorCode === '000000') {
          this.$message.success(this.translate('configScs'))
          this.showDialog = false
          this.getList()
        }
      }).catch(() => {
        this.showDialog = false
      })
    },
    getList() {
      integralconfig({ param: { type: 1 } }).then(res => {
        this.listLoading = false
        this.list = res.record[1]
        this.listb = res.record[2]
        this.listc = res.record[3]
        const dk = res.record[5]
        const dikou = res.record[4]
        const xiaohu = res.record[6]
        this.xiaohu = xiaohu[0]
        this.dikou = dikou[0]
        this.dk = dk[0]
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: "";
    width: calc((100% - 90px) / 4);
  }

  .holder {
    width: calc((100% - 90px) / 4);
  }

  .device-item {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;
    width: calc((100% - 90px) / 4);

    .device-uploader {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      cursor: pointer;
      border: 1px dashed #ccc;
      border-radius: 8px;
      transition: all 0.3s;
      margin-right: 20px;
      &:hover {
        border-color: $menuActive;
        .uploader-icon {
          color: $menuActive;
        }
      }
      ::v-deep .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .file {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          .delete {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
            align-items: center;
            justify-content: center;
            .icon {
              color: #fff;
            }
          }
          &:hover {
            .delete {
              display: flex;
            }
          }
        }
      }
      .uploader-icon {
        color: #aaaaaa;
        font-size: 22px;
        transition: all 0.3s;
      }
    }

    .name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      .value {
        align-self: flex-start;
        font-weight: bold;
        font-size: 15px;
      }
    }
    .image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
}
.tip {
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  color: #aaaaaa;
}
</style>
